import 'package:flutter/material.dart';
import 'package:flutter_study/project/_02douban/model/home_model.dart';
import 'package:flutter_study/project/_02douban/widgets/dash_line.dart';
import 'package:flutter_study/project/_02douban/widgets/star_rating.dart';

class HomeMovieItem extends StatelessWidget {
  final MovieItem movie;

  HomeMovieItem(this.movie);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      // 设置底部边距（边框）
      decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(width: 8, color: Color(0xffeeeeee)))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildHeader(),
          SizedBox(
            height: 10,
          ),
          _buildContent(),
          SizedBox(
            height: 10,
          ),
          _buildFooter(),
        ],
      ),
    );
  }

  // 构建头部布局
  Widget _buildHeader() {
    return Container(
      // 同时满足圆角+填充色
      decoration: BoxDecoration(
        color: Color.fromARGB(255, 238, 205, 144),
        borderRadius: BorderRadius.circular(3),
      ),
      child: Text(
        "No.${movie.rank}",
        style: TextStyle(fontSize: 18, color: Color.fromARGB(255, 131, 95, 36)),
      ),
    );
  }

  // 构建中间内容
  Widget _buildContent() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildContentImage(),
        SizedBox(
          width: 5,
        ),
        _buildContentInfo(),
        SizedBox(
          width: 15,
        ),
        _buildContentDashLine(),
        SizedBox(
          width: 5,
        ),
        _buildContentWish()
      ],
    );
  }

  // 构建内容圆角图片
  Widget _buildContentImage() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.network(
        movie.imageURL,
        height: 150,
      ),
    );
  }

  // 构建内容信息
  Widget _buildContentInfo() {
    return Expanded(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildContentInfoTitle(),
        SizedBox(
          width: 10,
        ),
        _buildContentInfoRate(),
        SizedBox(
          width: 10,
        ),
        _buildContentInfoDesc()
      ],
    ));
  }

  // 内容标题
  Widget _buildContentInfoTitle() {
    // 为了让富文本中三个元素(图标、标题文本、上映时间文本居中对齐)
    // 使用alignment属性生命居中对齐
    final widget = Text.rich(TextSpan(children: [
      // 标题图标
      WidgetSpan(
        child: Icon(
          Icons.play_circle_fill,
          color: Colors.red,
          size: 28,
        ),
        baseline: TextBaseline.ideographic,
        alignment: PlaceholderAlignment.middle,
      ),
      // 如果屏幕小，标题长，标题会自动另起一行显示，不和play icon在一行
      /*WidgetSpan(
          child: Text(
            movie.title,
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          alignment: PlaceholderAlignment.middle),*/
      // 解决换行问题，将标题字符串拆成一个个字符，按照字符显示
      // ... 可以将List解构为list.size个元素，即下面有size个WidgetSpan
      ...movie.title.runes.map((e) {
        return WidgetSpan(
            child: Text(
              String.fromCharCode(e),
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            alignment: PlaceholderAlignment.middle);
      }).toList(),
      WidgetSpan(
          child: Text(
            "(${movie.playDate})",
            style: TextStyle(fontSize: 18, color: Colors.grey),
          ),
          alignment: PlaceholderAlignment.middle),
    ]));
    return widget;
  }

  // 内容评分
  Widget _buildContentInfoRate() {
    // FittedBox：当子元素大于父元素时，会将child压缩
    return FittedBox(
      child: Row(
        children: [
          StarRating(
            rating: movie.rating,
            size: 20,
          ),
          SizedBox(
            width: 4,
          ),
          Text(
            "${movie.rating}",
            style: TextStyle(fontSize: 16),
          )
        ],
      ),
    );
  }

  // 内容表述
  Widget _buildContentInfoDesc() {
    // 字符串拼接 影片类 使用空格拼接
    final genresString = movie.genres.join(" ");
    final directorString = movie.director.name;
    List<Actor> casts = movie.casts;
    final actorString = casts.map((e) => e.name).join(" ");
    return Text(
      "$genresString / $directorString / $actorString",
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(fontSize: 16),
    );
  }

  // 虚线
  Widget _buildContentDashLine() {
    return Container(
      height: 100,
      child: DashLine(
        axis: Axis.vertical,
        dashWidth: .4,
        dashHeight: 6,
        color: Colors.green,
        count: 10,
      ),
    );
  }

  // 收藏
  Widget _buildContentWish() {
    return Container(
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              "assets/images/home/wish.png",
              width: 32,
            ),
            Text("想看",
                style: TextStyle(
                    fontSize: 14, color: Color.fromARGB(255, 235, 170, 60))),
          ],
        ));
  }

  Widget _buildFooter() {
    return Container(
      // 宽度占满父元素
      width: double.infinity,
      padding: EdgeInsets.all(8),
      child: Text(
        movie.originalTitle,
        style: TextStyle(fontSize: 12, color: Color(0xff333333)),
      ),
      decoration: BoxDecoration(
        color: Color(0xffcccccc),
        borderRadius: BorderRadius.circular(6),
      ),
    );
  }
}
